import { ElButton } from "element-plus";
import { ElTable } from "element-plus";
import { ElDialog ,ElTableColumn,ElInput} from "element-plus";
import { createVNode,render} from "vue";
interface DataType {
  filed:string,label:string
}
interface editDataType {
  value:string,label:string
}
interface configType{
  table:{options:Array<DataType>,key:string},
  label:string,
  type:string
}


type optionType={
  config:configType,
  data:Array<editDataType>,
  onComfirm:(config:Array<editDataType>)=>void
}
type stateType={
   option:optionType,
   isShow:boolean,
   editData:Array<editDataType>

}
const TableComponent=defineComponent({
 props:{
  option:{
    type:Object as PropType<optionType>,
    required:true

  },
 },

 setup(props,{emit,expose}){
  console.log(props.option,'sdfdd');

  
  const state=reactive<stateType>({
    option:props.option,
    isShow:false,
    editData:[]
  })
  const methods={
    show(option:optionType){
      state.isShow=true
      state.option=option
      state.editData=JSON.parse(JSON.stringify(option.data))


    }
  }
  expose(methods)
  const add=()=>{
    state.editData.push({value:'',label:''})
  }
  const onCancel=()=>{
    state.isShow=false

  }
  const onConfirm=()=>{  
    state.option.onComfirm(state.editData)
    onCancel()
  }
  return ()=>{
    return <ElDialog v-model={state.isShow} title={state.option?.config?.label||''} >
      {{
        default:()=>{
          return <div>
            <div><ElButton type="primary" onClick={add} >添加</ElButton > <ElButton>重置</ElButton> </div>
            <ElTable data={state.editData} >
              <ElTableColumn type="index" >
             
            </ElTableColumn>
          {state.option.config.table.options.map((item)=>{
            return <ElTableColumn  label={item.label} >
              {{
                default:(record:any)=>{
                  return <ElInput v-model={record.row[item.filed]} />

                }
              }}
               </ElTableColumn>

          })}
            <ElTableColumn label="操作" >
              <ElButton type="danger" >删除</ElButton>
            </ElTableColumn>
            </ElTable>
          </div>
        },
        footer:()=>{
          return <>
          <ElButton onClick={onCancel} >取消</ElButton>
          <ElButton type="primary" onClick={onConfirm} >确定</ElButton>
          </>
        }
      }}

    </ElDialog>

  }
 }
})
let vm: VNode | null = null;
export const $tableDiaLog=(option:optionType)=>{
  if(!vm){
    const el=document.createElement("div")
    vm=createVNode(TableComponent,{option})
    render(vm,el)
    document.body.appendChild(el)

  }
  vm.component?.exposed?.show(option)
}